<template>
    <div class="container">
        <div class="handleCtx">
             <div class="topctx">
                <div class="left iconfont icon-rizhi" @click="goLog">
                </div>
                <div class="right">
                    <div v-if="user.name">{{ user.name }}</div>
                    <div v-else>注册/登录</div>
                </div>
            </div>
            <div class="title">
                <p>待办小管家</p>
            </div>
            <div class="outinput">
                <input type="text" v-model="msg" placeholder="请输入内容" @keyup.enter="handleInput">
                <button @click="handleInput">添加</button>
            </div>
        </div>
        <div class="scrollCtx">
            <div class="listCtx" v-for="(item,index) in listData" :key="item.id">
                <div class="itemCtx">
                    <p>{{index+1}}:{{ item.name }}</p>
                    <button @click="handleDel(index)">X</button>
                </div>
            </div>
        </div>
        <div class="empty" v-if="!listData.length">
            <p>暂时没有待办！</p>
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    components: {

    },
    data() {
        return {
            msg:'',
            user:{
                name:'',
                pass:''
            },
            listData: [
            ]
        }
    },
    mounted() {
        const Content = JSON.parse(localStorage.getItem('ctx'))
        if(Content && Content.length>0){
            this.listData = Content
        }
    },
    methods: {
        goLog(){
            this.$router.push('./updateLog')
        },
        handleInput(){
            if(!this.msg){
                confirm('当前待办内容不能为空！')
                return
            }
            let index = this.listData.length+1
            this.listData.push({
                name: this.msg
            })
            localStorage.setItem('ctx',JSON.stringify(this.listData))
            this.msg = ''
        },
        handleDel(index){
            this.listData.splice(index,1)
            localStorage.setItem('ctx',JSON.stringify(this.listData))
        }
    }
};
</script>
<style lang='less' scoped>
.container {
    width: 100%;
    padding-bottom: 20px;
    .handleCtx{
        top: 0;
        position: sticky;
        background-color: #fff;
        padding: 0 0 20px 0;
        .topctx{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            .left{
                font-size: 20px;
            }
            .right{
                font-size: 14px;
            }
        }
        .title{
            margin-bottom: 20px;
            color: skyblue;
            p{
                font-size: 21px;
                font-weight: bolder;
            }
        }
        .outinput{
            // width: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            input{
                height: 20px;
                line-height: 20px;
                padding: 5px 10px;
                background-color: antiquewhite;
                color: coral;
            }
            button{
                margin-left: 10px;
                width: 80px;
                height: 30px;
                color: salmon;
                background-color: bisque;
                border-radius: 5%;
                border:1px burlywood ;
            }
        }
    }
    .scrollCtx{
        // height: ;
        padding: 8px;
        overflow-y: scroll;
        .listCtx {
            padding: 8px 10px;
            background-color: blanchedalmond;
            border: 1px solid skyblue;
            .itemCtx{
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                button{
                    width: 20px;
                    height: 20px;
                }
            }
        }
        .listCtx:not(:nth-child(1)){
            margin-top: 15px;
        }
    }

    .empty{
        margin-top: 30px;
    }
}
</style>